<template>
    <div class="login-container">
        <el-form :model="form" label-width="120px" class="login-from" :rules="rules" ref="loginFormRef">
            <div class="title-container">
                <h3 class="title">用户登录</h3>
            </div>
            <el-form-item prop="username">
                <el-input v-model="form.username" placeholder="请输入用户名">
                    <template v-slot:prefix>
                        <User style="width: 20px; height: 20px;" />
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="form.password" type="password" placeholder="请输入密码" ref="pwd">
                    <template v-slot:prefix>
                        <Lock style="width: 20px; height: 20px;" />
                    </template>
                    <template v-slot:suffix>
                        <el-icon @click="fn">
                            <template v-if="isShiowEye">
                                <View style="width: 20px; height: 20px;" />
                            </template>
                            <template v-else>
                                <Hide style="width: 20px; height: 20px;" />
                            </template>
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <br>
            <el-button type="primary" style="width: 77%; margin-left: 120px;" @click="handleSubmit">登录</el-button>
        </el-form>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus'
import {userStore} from '@/store/user'
const form = ref({
    username: '铁锤',
    password: 'wang4462'
})
const loginFormRef = ref(null)
const user = userStore()
// 密码校验方法
const checkPwd = (rule, value, cb) => {
    // rule 校验规则  value 绑定表单的值，cb回调函数,指定代表校验通过
    let reg = /.*/
    if (reg.test(value)) {
        cb()
    } else {
        cb(new Error('密码格式不正确'))
    }
}
// 表单校验规则
const rules = ref({
    username: [
        { required: true, message: "用户名不能为空", trigger: 'blur' },
    ],
    password: [
        { required: true, message: "密码不能为空", trigger: 'blur' },
        // 自定义校验规则
        { validator: checkPwd }
    ]
})
// 控制密码框的显示状态
const isShiowEye = ref(true)
let pwd = ref(null) // 密码表单实例对象
const fn = () => {
    isShiowEye.value = !isShiowEye.value
    if (isShiowEye.value) {
        pwd.value.input.type = 'password'
    } else {
        pwd.value.input.type = 'text'
    }
}

// 发送登录请求
const handleSubmit = () => {
    // 校验密码
    loginFormRef.value.validate(async (vaild) => {
        // 校验通过，发送登录请求
        if (vaild) {
            await user.loginFn(form.value)
        }
        else {
            // 校验失败，弹出提示框
            ElMessage.error({
                message:'填写不规范,请检查后提交!!!!!',
                customClass:'prompt',
                grouping:true,
            })
        }
    })
}
</script>


<style lang="scss" scoped>
div{
    width: 100%;
    height: 100%;
    position: relative;
    background-color:#3E4E60;
}
.login-container {
    min-height: 100%;
    height: 100%;
    width: 100%;
    overflow: hidden;

    .login-from {
        position: relative;
        top: 100px;
        left: -32px;
        width: 520px;
        max-width: 100%;
        margin: 0 auto;
        overflow: hidden;

        .title-container {
            font-size: 26px;
            position: relative;
            left: 50%;
            color: white;
        }

        :deep(.el-button) {
            width: 100%;
            font-size: 20px;
        }
    }
}
// 提示框样式
.prompt{
    width: auto;
    height:auto;
}
// 遮罩层样式
.Mask{
    background-color: red;
}
</style>